

<template>
  <div class="app-container">

    <div class="app-container__section" >
      <PlusSearch
          v-bind="getSearchBinds()"
          :columns="columns"
          v-model="searchForm"
      >

        <template #plus-field-createTime>
          <el-date-picker  start-placeholder="开始时间" end-placeholder="结束时间"  v-model="searchForm.timeRange" type="daterange"  />
        </template>

      </PlusSearch>
    </div>

    <div class="app-container__section">
      <PlusTable
          v-bind="getBinds()"
          :columns="columns"
      >
        <template #empty>
          <el-empty image-size="100" description="暂无数据"></el-empty>
        </template>
        <template #title>
          <table-title />
        </template>
        <template #toolbar>

          <el-button
              type="primary"
              plain
              icon="Plus"
              @click="handleAdd"
              v-hasPermi="['edutation:class:add']"
          >新增</el-button>
          <el-button
              type="success"
              plain
              icon="Edit"
              :disabled="gSelection.length !== 1"
              @click="handleUpdate(gSelection[0])"
              v-hasPermi="['edutation:class:edit']"
          >修改</el-button>
          <el-button
              type="danger"
              plain
              icon="Delete"
              :disabled="gSelection.length === 0"
              @click="handleDelete"
              v-hasPermi="['edutation:class:remove']"
          >删除</el-button>
          <el-button
              type="warning"
              plain
              icon="Download"
              @click="handleExport"
              v-hasPermi="['edutation:class:export']"
          >导出</el-button>

          <ClockTimer :task="gGetList" />
          <SearchAreaControl v-model="gShowSearchForm" />
        </template>

        <template #plus-cell-schoolId="{ row }">
          <dict-tag :options="sys_data_status" :value="row.schoolId"  />
        </template>

        <template #plus-cell-campusId="{ row }">
          <dict-tag :options="sys_user_sex" :value="row.campusId"  />
        </template>

        <template #plus-cell-proId="{ row }">
          <dict-tag :options="sys_user_sex" :value="row.proId"  />
        </template>

        <template #plus-cell-action="scope">
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"  v-hasPermi="['edutation:class:edit']">修改</el-button>
          <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['edutation:class:remove']">删除</el-button>
        </template>
      </PlusTable>
    </div>

    <add-form @update="gGetList" ref="addFormRef"  />
  </div>
</template>


<script setup name="Class">
import { listClassApi, getClassApi, delClassApi, } from "@/api/edutation/class";
import { useTablePage } from '@/hooks/useTablePage.js'
import { useActions } from '@/hooks/useActions.js'
import { getCurrentInstance,ref } from "vue"
import AddForm from './addForm.vue'
import {useCommonData} from "@/hooks/useCommonData.js";
const { proxy } = getCurrentInstance();
const { sys_data_status,sys_user_sex } = proxy.useDict('sys_data_status','sys_user_sex');

const {
  schoolDataList, getSchoolDataList,
  campusDataList,getCampusDataList,
  professionalDataListBySchoolId,getProfessionalDataListBySchoolId,
} = useCommonData();

getSchoolDataList()

const primaryKey = "classId"  // 主键
// =============================================
// 列表请求逻辑

const searchForm = ref({})
const columns = computed(()=>[{
  label: '班级名称',
  prop: 'className',
  hideInSearch:false,
  valueType:'input',
  tableColumnProps: {
    align: 'center'
  },
  fieldProps:{
    maxlength: 200,
    modelModifiers: { trim: true },
  },

},{
  label: '入学时间',
  prop: 'entryDate',
  hideInSearch:false,
  valueType:'date-picker',
  tableColumnProps: {
    align: 'center'
  },

  fieldProps:{
    type: 'date',
    format: 'YYYY-MM-DD',
    valueFormat: 'YYYY-MM-DD',
  },

},{
  label: '归属学校',
  prop: 'schoolId',
  hideInSearch:false,
  valueType:'select',
  tableColumnProps: {
    align: 'center'
  },
  render: (text,{row})=> row.schoolName,
  options:schoolDataList.value,
  optionsMap:{
    label:'schoolName',
    value:'schoolId',
  },
  fieldProps: {
    onChange: val=>{
      searchForm.value.proId = ''
      searchForm.value.campusId = ''
      if(val){
        getCampusDataList({schoolId:val})
        getProfessionalDataListBySchoolId(val)
      }else{
        campusDataList.value = [];
        professionalDataListBySchoolId.value = []
      }
    }
  }

},{
  label: '归属校区',
  prop: 'campusId',
  hideInSearch:false,
  valueType:'select',
  tableColumnProps: {
    align: 'center'
  },
  render: (text,{row})=> row.campusName,
  options:campusDataList.value,
  optionsMap:{
    label:'campusName',
    value:'campusId',
  },

},
  {
    label: '关联专业',
    prop: 'proId',
    hideInSearch:false,
    valueType:'select',
    tableColumnProps: {
      align: 'center'
    },
    render: (text,{row})=> row.proName,
    options:professionalDataListBySchoolId.value,
    optionsMap:{
      label:'proName',
      value:'proId',
    },
  },
  {
  label: '班主任',
  prop: 'managerId',
  hideInSearch:false,
  valueType:'input',
  tableColumnProps: {
    align: 'center'
  },
  fieldProps:{
    maxlength: 200,
    modelModifiers: { trim: true },
  },

},
  {
    label: '状态',
    prop: 'status',
    hideInSearch:false,
    valueType:'radio',
    options:sys_data_status.value,
    tableColumnProps: {
      align: 'center'
    },

  },{
    label: '备注',
    prop: 'remark',
    hideInSearch:false,
    valueType:'input',
    tableColumnProps: {
      align: 'center'
    },
    fieldProps:{
      maxlength: 200,
      modelModifiers: { trim: true },
    },

  },

  {
    label: '操作',
    prop: 'action',
    minWidth: '120px',
    hideInSearch: true,
    hideInForm: true,
    tableColumnProps: {
      align: 'center',
      fixed: 'right'
    }
  }
])
const {
  gGetList,
  gSelection,
  gShowSearchForm,
  getBinds,
  getSearchBinds
} = useTablePage(listClassApi, {
  searchForm,
  beforeRequest(query){

    const { timeRange, ...rest } = query;
    const params = proxy.formatRangeTime(timeRange, undefined,'YYYY-MM-DD');
    return { ...rest, params }

  }
})

// 删除逻辑
const { deleteAction } = useActions();
function handleDelete(row) {
  deleteAction({
    api: delClassApi,
    uniqueKey:primaryKey,
    selection:row[primaryKey] || gSelection.value
  }).then(() => {
    gGetList();
  });
}

const addFormRef = ref(null)
// 新增操作
const handleAdd = ()=>{
  addFormRef.value.openDialog();
}
// 修改操作
const handleUpdate = (val)=>{
  addFormRef.value.openDialog(val);
}

// 导出逻辑
const  handleExport = () =>{
  proxy.download(
      'edutation/class/export',
      {...searchForm.value},
      `class_${new Date().getTime()}.xlsx`
  )
}
</script>


